<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back">
        <image class="back" src="/static/img/back.png"></image>
      </view>
      分配组员
    </view>
    <view style="height: 140upx"></view>
    <view class="line-select">
      <view class="title"
        ><text>已选择{{ checkedPepe }}人</text></view
      >
      <hr />
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        :scroll-with-animation="true"
        class="scroll-Y"
      >
        <u-checkbox-group :wrap="true">
          <view class="check_box" v-for="(item, index) in list" :key="index">
            <view class="check_box_item">
              <view class="item_top">
                <u-checkbox v-model="item.checked" :name="item.name"
                  >{{ item.name }}
                </u-checkbox>
                <u-image
                  v-if="query.leaderCode == item.idK"
                  width="30rpx"
                  height="30rpx"
                  src="../../static/img/leader.png"
                  mode=""
                ></u-image>
              </view>
            </view>
            <hr />
          </view>
        </u-checkbox-group>
      </scroll-view>
      <view class="footer">
        <u-button type="primary" @click="confirm">确定</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { WORK_CONTROLLER } from "../../api/pms";
export default {
  components: {},

  data() {
    return {
      scrollTop: 0,
      checkedPepe: "0",
      list: [],
      query: {},
    };
  },
  onLoad(options) {
    this.query = options;
  },
  watch: {
    list: {
      handler(newval) {
        let filterArr = this.list.filter((item) => item.checked);
        this.checkedPepe = filterArr.length;
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getNameByOrgId();
  },

  methods: {
    confirm() {
      let filterCheck = this.list.filter((item) => item.checked);
    },
    getNameByOrgId() {
      if (this.query.managementOrg) {
        this.fetch(
          "get",
          this.$store.state.baseUrl + WORK_CONTROLLER.GET_NAME_BY_ORGID,
          {
            num: this.query.managementOrg,
          }
        ).then((res) => {
          if (res?.success) {
            this.list = res?.data.map((item) => {
              if (
                (this.query.leaderCode && item.idK == this.query.leaderCode) ||
                (this.query.people &&
                  this.query.people.split(",").includes(item.idK))
              ) {
                return {
                  idK: item.idK,
                  name: item.name,
                  checked: true,
                };
              } else {
                return {
                  idK: item.idK,
                  name: item.name,
                  checked: false,
                };
              }
            });
          }
        });
      } else {
        this.leaderOptions = [];
      }
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style scoped lang="less">
.footer {
  padding: 0 20px;
}
hr {
  border: 0;
  border-top: 1px solid #ebebeb;
  // padding: 5px 0 ;
}
.content {
  overflow: hidden;
}
.line-select {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 90px);
}
.scroll-Y {
  flex: 1;
  height: 0;
  padding: 10px;
  padding-top: 5px;
}
.app-title {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  .history-icon {
    float: right;
    /deep/.u-icon__icon {
      position: relative;
      top: 8upx !important;
    }
  }
}
.title {
  text-align: center;
  padding: 10rpx 0;
}
.u-checkbox-group {
  display: flex;
  flex-direction: column;
  .check_box {
    flex: 1;
    &_item {
      padding: 5px 20px;
      .item_top {
        display: flex;
        flex-direction: row;
        align-items: center;
        /deep/.u-checkbox {
          width: auto !important;
          flex: 0 0 auto !important;
        }
        .u-image {
        }
      }
    }
  }
}
</style>
